import React from 'react';
import styles from './dataCenter.less';
import classNames from 'classnames';

import titleicon from '../../assets/imags/alldata/tietle_icon.png';
import detailicon from '../../assets/imags/alldata/detail_icon.png';

export default function ChartBox({ className, title, content, detail = true }) {
  const clsString = classNames(styles.chartDivider, className);
  if (detail) {
    return (
      <div className={clsString}>
        <div className={styles.bgChartStyle}>
          <div className={styles.titleHeader}>
            <img className={styles.imgLeft} src={titleicon} />
            <span>{title}</span>
            <span className={styles.titleRight}>详细</span>
            <img className={styles.imgRight} src={detailicon} />
          </div>
          <div className={styles.content}>{content}</div>
        </div>
      </div>
    );
  } else {
    return (
      <div className={clsString}>
        <div className={styles.bgChartStyle}>
          <div className={styles.titleHeader}>
            <img className={styles.imgLeft} src={titleicon} />
            <span>{title}</span>
          </div>
          <div>{content}</div>
        </div>
      </div>
    );
  }
}
